<template>
  <div class="main-bg">
    <div class="entity-item">
      <div class="user">
        <el-avatar
            :src="questionData.userImageUrl"
        />
        <el-text size="large"> {{ questionData.userNickname }} </el-text>

      </div>
      <div class="title">
        {{ questionData.questionTitle }}
      </div>
      <div class="displayText">
        <div v-html="questionData.content"></div>
      </div>
      <div class="bottom-time">
        <span>发布于{{ questionData.createTime }}</span>
      </div>

      <div class="bottom-items">
        <div v-if=" questionData.nowUserLiked === '0' " class="up-down" @click="questionLiked()">赞同({{questionData.likeCount}})</div>
        <div v-else-if=" questionData.nowUserLiked !== '0' " class="up-downed" @click="questionCancelLiked(questionData.questionId)">已赞同({{questionData.likeCount}})</div>

        <div v-if=" questionData.nowUserCollected === '0' " class="up-down" @click="questionCollected(questionData.questionId)">收藏({{questionData.collectCount}})</div>
        <div v-if=" questionData.nowUserCollected !== '0' " class="up-downed" @click="questionCancelCollected(questionData.questionId)">已收藏({{questionData.collectCount}})</div>

        <div class="up-down" @click="changeShowComment()">评论({{questionData.commentCount}})</div>
      </div>
      <div v-if="questionData.showComment === '1' ">
        <CommentCard
            entityType="question"
            :entityId="questionData.questionId"
        >
        </CommentCard>
      </div>
      <div class="center-div" >
        <el-button type="primary" size="large" @click="toAddAnswer" round>我要回答</el-button>
        <el-button type="success" size="large" @click="toUpdateQuestion" v-if="questionData.userId === loginUser.userId" round>我要编辑</el-button>
      </div>

    </div>
  </div>
</template>

<script>
import axios from "@/settings/axios";
import * as commonUtils from "@/utils/CommonUtils";
import {ElMessage} from "element-plus";
import {getUserInfo} from "@/manager/UserManager";
import CommentCard from "@/components/CommentCard";
import router from "@/router";


export default {
  name: "OneQuestionBox",
  data() {
    return {
      questionData: {},
      loginUser: {},
    }
  },
  components:{CommentCard},
  watch: {
    async questionId(newValue, oldValue) {
      oldValue;
      if (this.questionId !== null && this.questionId !== "" && this.questionId !== undefined) {
        let params = {
          "questionId": newValue
        };
        let shaneQuestion = await axios.get("/shane_question/get_one_question_by_id", params);
        this.questionData = shaneQuestion;
      }
    },
  },
  async mounted() {
    let loginUser = await getUserInfo();
    this.loginUser = loginUser;
    console.log(loginUser)
  },
  methods: {
    async questionLiked(){
      let params = {
        "questionId": this.questionId
      }
      let message = await axios.post("/shane_question/insert_one_question_likes", params);
      const questionData = this.questionData;
      questionData.nowUserLiked = "1";
      questionData.likeCount = commonUtils.strAddOne(questionData.likeCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async questionCancelLiked(questionId) {
      let params = {
        "questionId": questionId
      }
      let message = await axios.post("/shane_question/delete_one_question_likes", params);
      const questionData = this.questionData;
      questionData.nowUserLiked = "0";
      questionData.likeCount = commonUtils.strSubOne(questionData.likeCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async questionCollected(questionId) {
      let params = {
        "questionId": questionId
      }
      let message = await axios.post("/shane_question/insert_one_question_collect", params);
      const questionData = this.questionData;
      questionData.nowUserCollected = "1";
      questionData.collectCount = commonUtils.strAddOne(questionData.collectCount)
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async questionCancelCollected(questionId) {
      let params = {
        "questionId": questionId
      };
      let message = await axios.post("/shane_question/delete_one_question_collect", params);
      const questionData = this.questionData;
      questionData.nowUserCollected = "0";
      questionData.collectCount = commonUtils.strSubOne(questionData.collectCount);
      ElMessage({
        showClose: true,
        message: message,
        type: 'success',
        center: true,
      });
    },
    async changeShowComment() {
      const questionData = this.questionData;
      if ( questionData.showComment === '1' ) {
        questionData.showComment = '0'
      }
      else if (questionData.showComment === '0') {
        questionData.showComment = '1'
      }
    },
    toAddAnswer() {
      let params = {
        "questionId": this.questionId
      };
      router.push({
        path: "/answer/add",
        query: params
      });
    },
    toUpdateQuestion() {
      let params = {
        "questionId": this.questionId
      };
      router.push({
        path: "/question/update",
        query: params
      });
    },

  },
  props: {
    questionId: String,
  }
};
</script>

<style scoped>
.main-bg {
  background-color: #ffffff;
  width: 70%;
  box-shadow: 0 1px 3px hsla(0, 0%, 7%, .1);
  /*height: 100vh;*/
  height: auto;
  margin: 20px auto 0 auto;
}



.tabs {
  /*margin: 20px 30px;*/
  padding: 20px 30px;
}

.tabs:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
}
.user {
  color: #646262FF;
  padding-bottom: 10px;
  display: flex;
}

.title {
  color: #000;
  font-size: larger;
  padding-bottom: 10px;
  font-weight: bold;
}

.displayText {
  padding-bottom: 10px;
}

.bottom-time {
  color: #a2a2a2;
  font-size: 13px;
}

.bottom-items {
  display: flex;
}

.up-down {
  background-color: #e4eefb;
  color: #056ce7;
  width: 80px;
  text-align: center;
  height: 24px;
  line-height: 20px;
  border-radius: 10px;
  margin: 10px 20px 0 0;
}

.up-down:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.up-downed {
  background-color: #e4eefb;
  color: #8a8f97;
  width: 90px;
  text-align: center;
  height: 24px;
  line-height: 20px;
  border-radius: 10px;
  margin: 10px 20px 0 0;
  user-select:none;
}

.up-down:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.up-downed:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  user-select:none;
}

.like {
  color: #8392a4;
  margin: 10px 20px 0 0;
}

.question-main {
  overflow: scroll;
  height: 100vh;
}

.more-data {
  text-align: center;
  padding: 20px 30px;
  border-bottom: #e3e3e3 2px solid;
  border-top: #e3e3e3 2px solid;
}

.more-data:hover {
  color: #54b4f8;
  cursor: pointer;
  border-bottom: 2px solid #54b4f8;
  border-top: 2px solid #54b4f8;
}
.center-div {
  text-align:center
}
</style>
